<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
	    <title>布局    </title>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <link href="../../py/resources/share/control/core.css" rel="stylesheet" type="text/css" />
		<link href="../../py/resources/share/control/splitter.css" rel="stylesheet" type="text/css" />
		<link href="../../py/resources/share/layout/box.css" rel="stylesheet" type="text/css" />
		<link href="../../py/resources/default/layout/box.css" rel="stylesheet" type="text/css" />
		<link href="../../py/resources/default/control/core.css" rel="stylesheet" type="text/css" />
	    
		<script src="../../py/system.js" type="text/javascript"></script>
		<script src="../../py/System/Dom/Element.js" type="text/javascript"></script>
	    <script src="../../py/System/Controls/Layout/LayoutEngine.js" type="text/javascript"></script>
	    <script src="../../py/System/Controls/Layout/AdvanceLayout.js" type="text/javascript"></script>
		<script src="../../py/System/Controls/Surround.js" type="text/javascript"></script>
		<script src="../../py/System/Controls/Resizing.js" type="text/javascript"></script>
		<script src="../../py/System/Controls/Splitter.js" type="text/javascript"></script>
	    <script src="../../py/System/Controls/Layout/BorderLayout.js" type="text/javascript"></script>
	    
		<script src="../../test/assets/scripts/debug.js" type="text/javascript"></script>
		<script src="../assets/scripts/common.js" type="text/javascript"></script>
	</head>

<body style="padding:200px">
	
	
	<!--
	
    <div class="x-box" style="width: 100%; height: 100%; position: relative;" id="ct">
		<div class="x-region-top" style="">
			<div  class="x-region-title"></div>
			<div class="x-box x-layout-default" style="background: none repeat scroll 0% 0% green; height: 100px; width: 100px;" id="p2">b</div>
		</div>
		
		<div class="x-region-middle" style="margin-bottom: 102px; top: 0px; height: 100%;">
			<div class="x-layout-left"></div>
			
			<div class="x-region-fill" style="right: 204px; left: 0px;">
				<div class="x-box x-region-default" style="background: none repeat scroll 0% 0% purple; height: 100px; width: 100px;" id="p5">e</div>
			</div>
			
			<div class="x-region-right">
				<div class="x-box x-region-default" style="background: none repeat scroll 0% 0% yellow; height: 100px; width: 100px;" id="p1">a</div>
				<div class="x-box x-region-default" style="background: none repeat scroll 0% 0% red; height: 100px; width: 100px;" id="p3">c</div>
			</div>
		</div>
		<div class="x-region-bottom">
			<div class="x-box x-layout-default" style="background: none repeat scroll 0% 0% orange; height: 100px; width: 100px;" id="p4">d</div>
		</div>
	</div>
	
	
	
	 -->
	 
	 
	 
	 
	<div id="ct" style="width:100%; height:100%;" class="x-box">
        <div id="p1" style="background: yellow; width: 100px;  ">a</div>
		<div id="p2" style="background: green; height: 100px; width: 100px">b</div>
        <div id="p3" style="background: red; height: 200px; width: 100px" >c</div>
        <div id="p4" style="background: orange; height: 100px; width: 200px">d</div>
        <div id="p5" style="background: purple; height: 100px; width: 100px" >e</div>
    </div>
	
	
        <script type="text/javascript">
    
	
   
        var layout = new  Layout.BorderLayout();
        
        var ctrl = new Control({
            dom: 'ct',
			padding: '2px 6px 6px 6px',
            controls: [
                new Control({
                    dom: 'p1'  ,
					dock: 'right'
                }),
                
                new Control({
                    dom: 'p2',
					dock: 'top'
                }),
                
                new Control({
                    dom: 'p3',
                    dock: 'left'
                }),
                
                new Control({
                    dom: 'p4',
					dock: 'bottom'
                }),
                
                new Control({
                    dom: 'p5',
					dock: 'fill'
                })
            ]
        });
        


        
        layout.initLayout(ctrl);
        
        layout.layout(ctrl);
		
		
        </script>
		
</body>
</html>
